import React, { Component } from 'react';
import {
  Button,
  Cascader,
  Col,
  DatePicker,
  Drawer,
  Form,
  Input,
  message,
  Popconfirm,
  Row,
  Select,
  Upload,
} from 'antd';
import { defDrawerWidth } from '@/defaultSettings';
import styled from 'styled-components';
import { DivFooter, LFlexHDiv } from '@/components/MHtmlTag';
import styles from './index.less';
import { formatMessage } from 'umi-plugin-react/locale';
import BaseComponent from '@/components/BaseComponent';
import moment from 'moment';

const InputDiv = styled.div`
  display: flex;
  width: 100%;
`;

const MLabel = styled.div`
  height: 40px;
  width: 150px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  justify-content: flex-end;
  padding-right: 8px;
`;

const RequiredSpan = styled.span`
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
`;

const LabelSpan = styled.span`
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
`;

const PreviewImage = styled.img`
  width: 100%;
`;

/**
 * 输入组件
 * @param props
 * @returns {JSX.Element}
 * @constructor
 */
const MFormInputItem = props => {
  const { fieldName = '', label = '', required = false, form, children, initialValue } = props;
  const { getFieldDecorator } = form;
  return (
    <InputDiv>
      <MLabel>
        {required ? <RequiredSpan>*</RequiredSpan> : null}
        <LabelSpan>{label}:</LabelSpan>
      </MLabel>
      <Form.Item style={{ flex: '1' }}>
        {children
          ? fieldName != ''
            ? getFieldDecorator(fieldName, {
                rules: [{ required: required, message: label != '' ? `请输入${label}` : '' }],
                initialValue: initialValue,
              })(children)
            : children
          : null}
      </Form.Item>
    </InputDiv>
  );
};

@Form.create()
class EditView extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { onClose, visible = false, form, record } = this.props;
    return (
      <Drawer
        title="编辑"
        placement="right"
        width={defDrawerWidth}
        closable={true}
        onClose={e => {
          if (onClose) {
            onClose(e);
          }
        }}
        visible={visible}
      >
        <div className={styles.mForm}>
          <Form>
            <Row>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'所属企业编号'}
                  fieldName={'company_id'}
                  required={true}
                  initialValue={record['company_id']}
                >
                  <Input placeholder={'请输入所属企业编号'} />
                </MFormInputItem>
              </Col>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'废物名称'}
                  fieldName={'waste_name'}
                  required={true}
                  initialValue={record['waste_name']}
                >
                  <Input placeholder={'废物名称'} />
                </MFormInputItem>
              </Col>
              <Col span={2}></Col>
            </Row>
            <Row>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'废物类别'}
                  fieldName={'waste_type'}
                  required={true}
                  initialValue={record['waste_type']}
                >
                  <Input placeholder={'请输入废物类别'} />
                </MFormInputItem>
              </Col>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'固废代码'}
                  fieldName={'waste_code'}
                  required={true}
                  initialValue={record['waste_code']}
                >
                  <Input placeholder={'固废代码'} />
                </MFormInputItem>
              </Col>
              <Col span={2}></Col>
            </Row>
            <Row>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'危险特性'}
                  fieldName={'waste_danger_type'}
                  required={true}
                  initialValue={record['waste_danger_type']}
                >
                  <Input placeholder={'请输入危险特性'} />
                </MFormInputItem>
              </Col>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'有害物质名称及含量'}
                  fieldName={'waste_harmful_matter_content'}
                  required={true}
                  initialValue={record['waste_harmful_matter_content']}
                >
                  <Input placeholder={'有害物质名称及含量'} />
                </MFormInputItem>
              </Col>
              <Col span={2}></Col>
            </Row>
            <Row>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'形态'}
                  fieldName={'waste_form_type'}
                  required={true}
                  initialValue={record['waste_form_type']}
                >
                  <Input placeholder={'请输入形态'} />
                </MFormInputItem>
              </Col>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'主要危险成分'}
                  fieldName={'waste_hazardous_ingredients'}
                  required={true}
                  initialValue={record['waste_hazardous_ingredients']}
                >
                  <Input placeholder={'主要危险成分'} />
                </MFormInputItem>
              </Col>
              <Col span={2}></Col>
            </Row>
            <Row>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'包装方式'}
                  fieldName={'waste_packing'}
                  required={true}
                  initialValue={record['waste_packing']}
                >
                  <Input placeholder={'请输入包装方式'} />
                </MFormInputItem>
              </Col>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'应急设备'}
                  fieldName={'waste_emergency_equipment'}
                  required={true}
                  initialValue={record['waste_emergency_equipment']}
                >
                  <Input placeholder={'应急设备'} />
                </MFormInputItem>
              </Col>
              <Col span={2}></Col>
            </Row>
            <Row>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'禁忌措施'}
                  fieldName={'waste_taboo_measures'}
                  required={true}
                  initialValue={record['waste_taboo_measures']}
                >
                  <Input placeholder={'请输入禁忌措施'} />
                </MFormInputItem>
              </Col>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'创建时间'}
                  fieldName={'create_time'}
                  required={true}
                  initialValue={record['create_time']}
                >
                  <Input placeholder={'创建时间'} />
                </MFormInputItem>
              </Col>
              <Col span={2}></Col>
            </Row>
            <Row>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'更新时间'}
                  fieldName={'update_time'}
                  required={true}
                  initialValue={record['update_time']}
                >
                  <Input placeholder={'请输入更新时间'} />
                </MFormInputItem>
              </Col>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'创建者'}
                  fieldName={'create_by'}
                  required={true}
                  initialValue={record['create_by']}
                >
                  <Input placeholder={'创建者'} />
                </MFormInputItem>
              </Col>
              <Col span={2}></Col>
            </Row>
            <Row>
              <Col span={11}>
                <MFormInputItem
                  form={form}
                  label={'是否删除0未删除1已删除'}
                  fieldName={'is_deleted'}
                  required={true}
                  initialValue={record['is_deleted']}
                >
                  <Input placeholder={'请输入是否删除0未删除1已删除'} />
                </MFormInputItem>
              </Col>
              <Col span={11}></Col>
            </Row>{' '}
          </Form>
        </div>

        <DivFooter>
          <LFlexHDiv>
            <LFlexHDiv flex={'1'} justifyContent={'center'}>
              <Button
                style={{
                  marginRight: 8,
                  width: '120px',
                }}
                onClick={() => {
                  if (onClose) {
                    onClose();
                  }
                }}
              >
                取消
              </Button>
              <Popconfirm
                title="确定执行当前操作吗?"
                onConfirm={() => {
                  this.handleSubmit();
                }}
              >
                <Button type="primary" style={{ width: '120px' }}>
                  编辑
                </Button>
              </Popconfirm>
            </LFlexHDiv>
          </LFlexHDiv>
        </DivFooter>
      </Drawer>
    );
  }

  /**
   * 处理提交操作
   * @param e
   */
  handleSubmit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { onConfirmClick, record } = this.props;
        if (onConfirmClick) {
          // 此处将数据进行一次转换
          values['id'] = record.id;
          onConfirmClick({ data: values });
        }
      } else {
        console.error('请将信息填写完整');
      }
    });
  };
}

export default EditView;
